<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>个人中心</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
</head>

<body>

<div th:replace="header :: nav"></div>

<script>
    function update() {
        var token = $("meta[name='_csrf']").attr("content");
        var header = $("meta[name='_csrf_header']").attr("content");
        var realName = $("#realName").val();
        var sex = $("#sex").val();
        var grade = $("#grade").val();
        var major = $("#major").val();
        var github = $("#github").val();
        var phone = $("#phone").val();
        var wechat = $("#wechat").val();
        var qq = $("#qq").val();
        var area = $("#area").val();
        var department = $("#department").val();
        var isSingle = $("#isSingle").val();

        var me = {
            "realName": realName,
            "sex": sex,
            "grade": grade,
            "major": major,
            "github": github,
            "phone": phone,
            "wechat": wechat,
            "qq": qq,
            "area": area,
            "department": department,
            "isSingle": isSingle
        }
        $.ajax({
            url: "/me",
            type:"POST",
            beforeSend: function(request) {
                request.setRequestHeader(header, token);
            },
            timeout:5000,
            data: me,
            success: function (result) {
                window.location.reload()
            },
            error:function (err) {
                alert("网络错误！"+err.toString());
            }
        });
    }
</script>
<div class="container">

<div th:replace="header :: meLeft"></div>

<div class="col-xs-10">
    <div class="form-horizontal">
        <input type="hidden" id="username" th:value="${me.username}">
        <div class="form-group">
            <label for="realName" class="col-xs-2 control-label">真实姓名</label>
            <div class="col-xs-10">
                <input type="text" class="form-control" id="realName" th:value="${me.realName}">
            </div>
        </div>
        <div class="form-group">
            <label for="sex" class="col-xs-2 control-label">性别</label>
            <div class="col-xs-10">
                <select id="sex" class="form-control">
                    <option th:selected="${me.sex}=='男'?true">男</option>
                    <option th:selected="${me.sex}=='女'?true">女</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="grade" class="col-xs-2 control-label">年级</label>
            <div class="col-xs-10">
                <input type="number" class="form-control" id="grade" th:value="${me.grade}" >
            </div>
        </div>
        <div class="form-group">
            <label for="major" class="col-xs-2 control-label">专业</label>
            <div class="col-xs-10">
                <input type="text" class="form-control" id="major" th:value="${me.major}" >
            </div>
        </div>
        <div class="form-group">
            <label for="github" class="col-xs-2 control-label">github</label>
            <div class="col-xs-10">
                <input type="text" class="form-control" id="github" th:value="${me.github}" >
            </div>
        </div>
        <div class="form-group">
            <label for="phone" class="col-xs-2 control-label">电话</label>
            <div class="col-xs-10">
                <input type="text" class="form-control" id="phone" th:value="${me.phone}">
            </div>
        </div>
        <div class="form-group">
            <label for="wechat" class="col-xs-2 control-label">微信</label>
            <div class="col-xs-10">
                <input type="text" class="form-control" id="wechat" th:value="${me.wechat}">
            </div>
        </div>
        <div class="form-group">
            <label for="qq" class="col-xs-2 control-label">QQ</label>
            <div class="col-xs-10">
                <input type="text" class="form-control" id="qq" th:value="${me.qq}">
            </div>
        </div>
        <div class="form-group">
            <label for="area" class="col-xs-2 control-label">所住校区</label>
            <div class="col-xs-10">
                <select id="area" class="form-control">
                    <option value="泰山" th:selected="${me.area}=='泰山'?true">泰山</option>
                    <option value="华山" th:selected="${me.area}=='华山'?true">华山</option>
                    <option value="启林" th:selected="${me.area}=='启林'?true">启林</option>
                    <option value="六一" th:selected="${me.area}=='六一'?true">六一</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="department" class="col-xs-2 control-label">部门</label>
            <div class="col-xs-10">
                <select id="department" class="form-control">
                    <option value="JSP" th:selected="${me.department}=='JSP'?true">JSP</option>
                    <option value="ASP" th:selected="${me.department}=='ASP'?true">ASP</option>
                    <option value="前端" th:selected="${me.department}=='前端'?true">前端</option>
                    <option value="其它" th:selected="${me.department}=='其它'?true">其它</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="isSingle" class="col-xs-2 control-label">isSignle</label>
            <div class="col-xs-10">
                <select id="isSingle" class="form-control">
                    <option value="2" th:selected="${me.isSingle}==2?true">maybe</option>
                    <option value="1" th:selected="${me.isSingle}==1?true">是</option>
                    <option value="0" th:selected="${me.isSingle}==0?true">否</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <button class="btn btn-default" onclick="update()">保存</button>
            </div>
        </div>
    </div>
</div>
</div>
</body>

</html>